<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest-v3/dist/style.css"
    />
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@next"></script>
    <!-- 引入NutUI 组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest-v3/dist/nutui.umd.js"></script>
  </head>
  <body>
    <div id="app">
      <nut-cell  is-link url="https://m.jd.com">跳转 https://m.jd.com</nut-cell>
      <nut-button type="primary" @click="showAddress">{{text}}</nut-button>
      <nut-address
        v-model:visible="showPopup"
        :province="province"
        :city="city"
        type="custom2"
        :country="country"
        :town="town"
        @change="onChange"
        @close="close"
        custom-address-title="请选择所在地区"
      ></nut-address>
    </div>
    <script>
      // 在 #app 标签下渲染一个按钮组件
      const app = Vue.createApp({
        data() {
          return {
            showPopup: true,
            province: [
              { id: 1, name: "北京" , title: 'B'},
              { id: 2, name: "广西" , title: 'G'},
              { id: 3, name: "江西" , title: 'J'},
              { id: 4, name: "四川" , title: 'S'},
            ],
            city: [
              { id: 7, name: "朝阳区", title: 'C' },
              { id: 8, name: "崇文区", title: 'C'},
              { id: 9, name: "昌平区", title: 'C' },
              { id: 6, name: "石景山区", title: 'S' },
            ],
            country: [
              { id: 3, name: "八里庄街道", title: 'B' },
              { id: 9, name: "北苑", title: 'B' },
              { id: 4, name: "常营乡", title: 'C' },
            ],
            town: [],
            text: "请选择地址",
            modify_id: -1,
            modify_index: -1,
            tasks: [],
          };
        },
        methods: {
          showAddress() {
            this.showPopup = !this.showPopup;
          },

          onChange(cal) {
            const name = this[cal.next];
            if (name.length < 1) {
              this.showPopup = false;
            }
          },
          close(val) {
            this.text = val.data.addressStr;
          },
        },
      });

      const Home = { template: `<h1>Contenuto Home</h1>` };
      const About = { template: `<h1>Contenuto About</h1>` };
      const Portfolio = { template: `<h1>Contenuto Portfolio</h1>` };
      const Contatti = { template: `<h1>Contenuto Contatti</h1>` };

      const routes = [
          { path: "/", component: Home },
          { path: "/about", component: About },
          { path: "/portfolio", component: Portfolio },
          { path: "/contatti", component: Contatti }
      ];

      const router = VueRouter.createRouter({
           history: VueRouter.createWebHashHistory(),
           routes
    })

      app.use(router);
      app.use(nutui);
      // 调用函数组件，弹出一个 Toast
      // nutui.Toast("NutUI 3.0");
      app.mount("#app");
    </script>
  </body>
</html>
